<template>
	<view class="" v-if="obj">
		<view class="" style="height: 22rpx;background: #f4f4f4;">

		</view>
		<view class="" style="background: #fff;padding-top: 32rpx;padding-left: 32rpx;padding-bottom: 8rpx;font-size: 26rpx;color: var(--, #262626);
">
			{{
				obj.state==0&&obj.pay_state==2?'支付失败':
				obj.state==0&&obj.pay_state==0?'等待付款':
				obj.state==1?'待发货':
				obj.state==2?'已取消':
				obj.state==3?'待收货':
				obj.state==4?'交易完成':
				obj.state==5?'订单完成':
				obj.state==8?'退款中':
				obj.state==7?'退款成功':
				obj.state==9?'退款失败':''
			}}
		</view>
		<!-- v-if="(JSON.stringify(obj.logistics)!='[]'&&JSON.stringify(obj.logistics)!='{}')&&obj.state==3" -->
		<view @click="seelogistics" v-if="(JSON.stringify(obj.logistics)!='[]'&&JSON.stringify(obj.logistics)!='{}')"
			class="" style="padding: 32rpx;display: flex;align-items: center;background: #fff;">
			<view class="" style="font-size: 0;margin-right: 22rpx;">
				<image style="width: 44rpx;height: 44rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/orderDetail2.png" mode=""></image>
			</view>
			<view class="">
				<view class="" style="font-size: 26rpx;color: var(--, #262626);">
					<text style="margin-right: 24rpx;">货物状态</text>
					<text>{{obj.logistics.status}}</text>
				</view>
				<view class=""
					style="margin-top: 16rpx;color: var(--, #626262);font-size: 22rpx;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
					{{obj.logistics.list.status}}
				</view>
			</view>
			<view class="" style="font-size: 0;margin-left: 32rpx;">
				<image style="width: 22rpx;height: 22rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/orderDetail3.png" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 3rpx;background: #f4f4f4;">

		</view>
		<view class="" style="padding:36rpx 32rpx;display: flex;align-items: center;background: #fff;">
			<view class="" style="font-size: 0;margin-right: 22rpx;">
				<image style="width: 44rpx;height: 44rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/orderDetail1.png" mode=""></image>
			</view>
			<view class="">
				<view class="" style="font-size: 26rpx;color: var(--, #262626);">
					<text style="margin-right: 24rpx;">{{obj.address.name}}</text>
					<text style="color: var(--, #626262);">{{obj.address.mobile}}</text>
				</view>
				<view class=""
					style="margin-top: 16rpx;color: var(--, #626262);font-size: 22rpx;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
					{{obj.address.province_text}}{{obj.address.city_text}}{{obj.address.area_text}}{{obj.address.address}}
				</view>
			</view>
		</view>
		<view class="" style="height: 22rpx;background: #f4f4f4;">

		</view>
		<view class=""
			style="padding: 21rpx 32px;padding-bottom: 20rpx;background: #fff;border-radius: 8rpx;overflow: hidden;">
			<view class="" style="display: flex;align-items: center;">
				<view class="" style="font-size: 0;margin-right: 20rpx;">
					<image style="width: 176rpx;height: 176rpx;" :src="ImgUrl+obj.items[0].goods.img[0]" mode="">
					</image>
				</view>
				<view class=""
					style="height: 176rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;">
					<view class=""
						style="color: var(--, #262626);font-size: 24rpx;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
						{{obj.items[0].goods.name}}
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view v-if="obj.items[0].sku" v-for="(item,index) in obj.items[0].sku.difference_text" class=""
							style="border-radius: 4rpx;border: 1rpx solid var(--, #626262);padding: 6rpx 12rpx;margin-right: 12rpx;font-size: 20rpx;color: #000;">
							{{item}}
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="" style="color: #E5432E;">
							<template v-if="type==0">
								<text style="font-size: 28rpx;">{{obj.score}}</text>
								<text style="font-size: 22rpx;">积分</text>
							</template>
							<template v-if="type==0&&obj.amount">
								+
							</template>
							<template v-if="obj.amount">
								<text style="font-size: 28rpx;">{{obj.amount}}</text>
								<text style="font-size: 22rpx;">元</text>
							</template>
						</view>
						<view class="" style="font-size: 22rpx;color: #333;">
							x{{obj.items[0].num}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: flex-end;margin-top: 28rpx;">
				<view v-if="obj.state==1||obj.state==3||obj.state==4||obj.state==5" @click="goPoage" class=""
					style="width: 176rpx;height: 60rpx;border-radius: 30rpx;border: 1rpx solid var(--, #262626);color: var(--, #262626);font-size: 24rpx;text-align: center;line-height: 60rpx;">
					申请退货
				</view>
			</view>
		</view>
		<view class="" style="height: 3rpx;background: #f4f4f4;">

		</view>
		<view class="" style="padding: 32rpx;border-radius: 8rpx 8rpx;background: #fff;">
			<view class="" style="color: var(--, #262626);font-size: 26rpx;margin-bottom: 32rpx;">
				详细信息
			</view>
			<view v-if="type==0" class="" style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;color: var(--, #626262);
margin-bottom: 28rpx;">
				<view class="">
					实付积分
				</view>
				<view class="">
					{{obj.score}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;color: var(--, #626262);
			margin-bottom: 28rpx;">
				<view class="">
					订单编号
				</view>
				<view class="">
					{{obj.order_sn}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;color: var(--, #626262);
						margin-bottom: 28rpx;">
				<view class="">
					支付方式
				</view>
				<view class="">
					<!-- 200 -->
					<template v-if="obj.state==0">
						{{
							obj.channel==1?'支付宝':
							obj.channel==2?'微信':''
							}}
					</template>
				</view>
			</view>
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;color: var(--, #626262);">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{obj.created_at}}
				</view>
			</view>
		</view>
		<!-- 占位置 -->
		<view class="" style="width: 750rpx;height: 176rpx;">

		</view>
		<view class=""
			style="width: 730rpx;height: 176rpx;position: fixed;background: #fff;bottom: 0;display: flex;justify-content: flex-end;padding-right: 20rpx;flex-wrap: wrap;">
			<!-- ||obj.state==2 -->
			<view @click.stop="del(obj.id)" v-if="obj.state==5||(obj.state==0&&obj.pay_state==2)"
				class="btn" style="border: 1rpx solid #262626;color: #262626;">
				删除记录
			</view>
			<view v-if="obj.state==4" class="btn" style="border: 1rpx solid #262626;color: #262626;margin-left: 20rpx;" @click.stop="go_pingjia(obj,1)">
				评价订单
			</view>
			<view class="btn" v-if="obj.state==3" @click="seelogistics" style="border: 1rpx solid #262626;color: #262626;margin-left: 20rpx;">
				查看物流
			</view>
			<view class="btn" v-if="obj.state==3" style="background: #0165FB;color: #fff;margin-left: 20rpx;">
				确认收货
			</view>
			<view @click.stop="cancle(obj.id)" v-if="obj.state==0&&obj.pay_state==0" class="btn" style="margin-left: 20rpx;border: 1rpx solid #262626;color: #262626;">
				取消
			</view>
			<view v-if="obj.state==0&&obj.pay_state==0" class="btn" style="background: #0165FB;color: #fff;margin-left: 20rpx;">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	import {
		scoreorderdetail,
		goodsorderdetail,
		scorecancel,
		scoredel,
		scorereceive,
		goodscancel,
		goodsdel,
		goodsreceive
	} from "@/api/common.js"
	export default {
		data() {
			return {
				id: '',
				obj: '',
				type:0,//0积分商城订单 1商城订单
			}
		},
		computed: {
			ImgUrl() {
				return this.$store.state.ImgUrl
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.type = options.type;
			this.getscoregooddetail();
		},
		methods: {
			// 确认收货
			confirm(id){
				uni.showModal({
					title:'提示',
					content:'确认收到货物吗？',
					success:res=>{
						if(res.confirm){
							if(this.type==0){
								scorereceive({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.getscoregooddetail();
								})
							}else{
								goodsreceive({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.getscoregooddetail();
								})
							}
						}
					}
				})
			},
			// 取消订单
			cancle(id){
				uni.showModal({
					title:'提示',
					content:'确认取消订单吗？',
					success:res=>{
						if(res.confirm){
							if(this.type==0){
								scorecancel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.getscoregooddetail();
								})
							}else{
								goodscancel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									this.getscoregooddetail();
								})
							}
						}
					}
				})
			},
			// 删除订单
			del(id){
				uni.showModal({
					title:'提示',
					content:'确认删除订单吗？',
					success:res=>{
						if(res.confirm){
							if(this.type==0){
								scoredel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},800)
								})
							}else {
								goodsdel({id}).then(res=>{
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},800)
								})
							}
						}
					}
				})
			},
			go_pingjia(item,type=0){
				if(type==1){
					item.evaliateType=1;
				}
				item.typess = this.type;
				uni.navigateTo({
					url:'/pages/Evaluate/Evaluate?obj='+encodeURIComponent(JSON.stringify(item))
				})
			},
			goPoage() {
				this.obj.typess = this.type;
				uni.navigateTo({
					url: './applyOut?obj=' + encodeURIComponent(JSON.stringify(this.obj))
				})
			},
			getscoregooddetail() {
				if(this.type==0){
					scoreorderdetail({
						id: this.id
					}).then(res => {
						this.obj = res.data;
					})
				}else{
					goodsorderdetail({
						id: this.id
					}).then(res => {
						this.obj = res.data;
					})
				}
			},
			seelogistics() {
				uni.navigateTo({
					url: '/pages/ShopOrder/seelogistics?id=' + this.id+'&type='+this.type
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	.btn {
		width: 244rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		margin-top: 14rpx;
	}
</style>